<!-- prepare a DOM container with width and height -->
<div id="author" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
    $(function () {
        var myChart = echarts.init(document.getElementById('author'));
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 人'
                }
            },
            series: [
                {
                    name: '未知',
                    type: 'line',
                    data: @json($noknow),
                },
                {
                    name: '男',
                    type: 'line',
                    data: @json($man),
                },
                {
                    name: '女',
                    type: 'line',
                    data: @json($woman),
                }
            ]
        };

        myChart.setOption(option);
    });
</script>
